<script>
import { reactive, ref, toRefs } from '@vue/reactivity'
import { getmode } from "../assets/api/home";
import { useRoute, useRouter } from 'vue-router';
export default {
    setup() {

        let route = useRoute()
        let router = useRouter()
        let name = route.query.title
        console.log(name);
        const loading = ref(false);
        const finished = ref(false);

        const onLoad = () => {
            getmode("", "2").then(res => {
                res.data.results.list.forEach(item => {
                    ac.dataList.push(item);
                });
            })

            // 加载状态结束
            loading.value = false;

            // 数据全部加载完成
            if (ac.dataList.length >= 10) {
                finished.value = true;
            }
        };


        let ac = reactive({
            // 全部
            dataList: [],
            //   系统课
            class1: [],
            //   公开课课
            class2: [],
        })

        let getmodeFun = () => {
            // 全部
            getmode("", "1").then(res => {
                console.log(res);
                ac.dataList = res.data.results.list
                console.log(ac.dataList);
            })
            // 系统课
            getmode("1", "1").then(res => {
                console.log(res);
                ac.class1 = res.data.results.list
                console.log(ac.class1);
            })
            // 公开课
            getmode("2").then(res => {
                console.log(res);
                ac.class2 = res.data.results.list
                console.log(ac.class2);
            })
        }
        getmodeFun()


        const active = ref(0);

        let goshop = (key)=>{
            router.push({
                path:"/netshop",
                query:{
                    key:key
                }
            })
        }

        return {
            ...toRefs(ac),
            active,
            onLoad,
            loading,
            finished,
            name,
            goshop
        }
    },

}
</script>

<template>
    <div class="container">
        <!-- 标题页 -->
        <header>
            <div class="left">
                <router-link to="/home">
                    <i></i>
                </router-link>
            </div>

            <div class="center">
                <h4>{{name}}</h4>
            </div>

            <div class="right"></div>
        </header>

        <!-- tabs -->
        <div class="tops">
            <van-tabs v-model:active="active">
                <van-tab title="全部">
                    <!-- 下拉加载 -->
                    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                        <div class="box-course">
                            <div @click="goshop(item.key)" class="course" v-for="item in dataList" :key="item">
                                <div class="titles">
                                    <i><img :src="item.sellingPointImg" alt=""></i>
                                    <h6>{{ item.sellingPoint }}<span></span></h6>
                                </div>

                                <div class="center">
                                    <img :src="item.img" alt="" />

                                    <span>{{ item.netSubjectName }}<i></i></span>

                                    <div class="text">
                                        <h4>{{ item.title }}</h4>
                                        <h6>{{ item.liveTime }} | {{ item.period }}课时</h6>

                                        <h5>
                                            <!-- <i><img :src="item.teacherImg" alt=""></i> -->
                                            {{ item.teacher }}</h5>
                                    </div>
                                </div>

                                <div class="footer">
                                    <h6>已购{{ item.buyers }}</h6>
                                    <span></span>
                                    <h6 class="text2">限购{{ item.limitBuyers }}</h6>
                                    <h5>{{ (item.disprice == 0 ? '免费' : "￥"+item.disprice) }}</h5>
                                </div>
                            </div>
                        </div>
                    </van-list>

                </van-tab>
                <van-tab title="系统课">
                    <div class="box-course">
                        <div @click="goshop(item.key)"  class="course" v-for="item in class1" :key="item">
                            <div class="titles">
                                <i><img :src="item.sellingPointImg" alt=""></i>
                                <h6>{{ item.sellingPoint }}<span></span></h6>
                            </div>

                            <div class="center">
                                <img :src="item.img" alt="" />

                                <span>{{ item.netSubjectName }}<i></i></span>

                                <div class="text">
                                    <h4>{{ item.title }}</h4>
                                    <h6>{{ item.liveTime }} | {{ item.period }}课时</h6>

                                    <h5>
                                        <!-- <i><img :src="item.teacherImg" alt=""></i> -->
                                        {{ item.teacher }}</h5>
                                </div>
                            </div>

                            <div class="footer">
                                <h6>已购{{ item.buyers }}</h6>
                                <span></span>
                                <h6 class="text2">限购{{ item.limitBuyers }}</h6>
                                <h5>{{ (item.disprice == 0 ? '免费' : "¥" + item.disprice) }}</h5>
                            </div>
                        </div>
                    </div>
                </van-tab>
                <van-tab title="公开课">
                    <div class="box-course">
                        <div @click="goshop(item.key)"  class="course" v-for="item in class2" :key="item">
                            <div class="titles">
                                <i><img :src="item.sellingPointImg" alt=""></i>
                                <h6>{{ item.sellingPoint }}<span></span></h6>
                            </div>

                            <div class="center">
                                <img :src="item.img" alt="" />

                                <span>{{ item.netSubjectName }}<i></i></span>

                                <div class="text">
                                    <h4>{{ item.title }}</h4>
                                    <h6>{{ item.liveTime }} | {{ item.period }}课时</h6>

                                    <h5>
                                        <!-- <i><img :src="item.teacherImg" alt=""></i> -->
                                        {{ item.teacher }}</h5>
                                </div>
                            </div>

                            <div class="footer">
                                <h6>已购{{ item.buyers }}</h6>
                                <span></span>
                                <h6 class="text2">限购{{ item.limitBuyers }}</h6>
                                <h5>{{ (item.disprice == 0 ? '免费' : "¥" + item.disprice) }}</h5>
                            </div>
                        </div>
                    </div>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<style lang="scss" scoped>
@import "../assets/css/base.css";

header {
    display: flex;
    justify-content: center;
    align-items: center;
}

header .left i {
    display: block;
    background-image: url(../assets/img/下载\ \(1\).png);
    width: 48px;
    height: 46px;
    background-size: 18px 18px;
    background-repeat: no-repeat;
    background-position: 20px 13px;
}

header .center {
    flex: 1;
    text-align: center;
}

header .center h4 {
    font-weight: bold;
    font-size: 17px;
}

header .right {
    width: 48px;
    height: 46px;
}

// 穿透样式
// 横线
.van-tabs ::v-deep .van-tabs__line {
    width: 24px;
    height: 4px;
    border-radius: 3px;
    background-color: #497ff4;
    bottom: 21px;
}

//原本颜色
::v-deep .van-tab {
    color: #c5cacd;

}

::v-deep .van-tabs__wrap {
    box-shadow: 0px 6px 6px 0px #eaeaea;
}

::v-deep .van-tab--active {
    font-weight: bolder;
    color: #21273d;
}


//课程
.course {
    margin: 12px 15px 15px 15px;
    box-shadow: 0px 3px 8px #c4c4c4;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}

/* 课程标题-开头部分 */
.course .titles {
    margin-top: 7px;
    margin-left: 5px;
    height: 32px;
    display: flex;
    align-items: center;
    background-image: linear-gradient(to right, #f9f9f9, #fff);
    border-radius: 10px;
}

.course .titles i {
    // background-image: url(../assets/img/base3/tongyong-icon.png);
    background-size: 22px 22px;
    width: 22px;
    height: 22px;
    margin: 0px 11px;
}

.course .titles>h6 {
    display: flex;
    height: 32px;
    align-items: center;
    font-weight: bold;
}

.course .titles>h6 span {
    width: 3px;
    height: 3px;
    border-radius: 1px;
    background-color: #211d11;
    align-items: center;
    margin: 0 5px;
}

.course .titles>h6:last-child span {
    background-color: transparent;
}

/* 课程信息-中间部分 */
.course .center {
    margin-left: 15px;
    margin-top: 10px;
    display: flex;
    position: relative;
}

.course .center span {
    position: absolute;
    top: 0px;
    left: 0px;

    display: block;
    width: 92px;
    height: 20px;
    line-height: 20px;
    color: #fffdff;
    font-size: 12px;
    text-align: center;
    font-weight: bold;

    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: #c2c9d9;
}

.course .center span i {
    position: absolute;
    top: 20px;
    left: 0px;
    width: 10px;
    height: 10px;
    background-size: 10px 10px;
    background-image: url(../assets/img/下载.png);
}

.course .center img {
    width: 120px;
    height: 90px;
    border-radius: 10px;
}

.course .center .text {
    display: flex;
    flex-direction: column;
    margin: 0 20px 0 15px;
}

.course .center .text h4 {
    font-weight: bolder;
}

.course .center .text h6 {
    color: #c3c3c5;
    height: 30px;
    line-height: 30px;
}

.course .center .text h5 {
    font-size: 12px;
    display: flex;
    align-items: center;
    color: #c3c3c5;
}

.course .center .text h5 i {
    background-size: 25px 25px;
    width: 25px;
    height: 25px;
    margin-right: 5px;

    img {
        width: 100%;
        height: 100%;
    }
}

/* 课程信息-下面 */
.footer {
    display: flex;
    height: 60px;
    align-items: center;
    margin-left: 15px;
}

.footer h6 {
    color: #949597;
}

.footer span {
    margin: 0px 8px;
    color: #949597;
    width: 2px;
    height: 10px;
    background-color: #f1f0ee;
}

.footer .text2 {
    flex: 1;
}

.footer h5 {
    margin-right: 14px;
    font-size: 12px;
    font-weight: bold;
}
</style>